<template>
  <div class="lg:gap-6 flex flex-col gap-3">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.hotCard') }}
      </h2>
      <nuxt-link
        v-if="show"
        :to="localePath(`/cards`)"
        class="py-2 px-4 bg-[#f7f7f7] rounded-full border flex justify-center items-center cursor-pointer"
      >
        <span class="font-bold text-[12px] text-[#121212] capitalize">
          {{ $t('pages.viewAll') }}
        </span>
      </nuxt-link>
    </div>
    <div class="lg:grid-cols-7 lg:grid lg:gap-10 max-lg:overflow-x-auto max-lg:flex-nowrap max-lg:flex gap-3">
      <nuxt-link
        :to="localePath(`/product/${i.code}`)"
        v-for="(i, k) in cards"
        :key="k"
        class="max-lg:w-1/3 max-lg:flex-none group lg:col-span-1 flex flex-col gap-2 cursor-pointer"
      >
        <div class="aspect-[8/11] bgg p-1 overflow-hidden">
          <div class="size-full overflow-hidden border rounded-[0.75rem] relative">
            <img
              class="size-full group-hover:scale-110 object-cover duration-300"
              :title="i.goods_name"
              :alt="i.goods_name"
              :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_3_4')"
            />
            <img src="~/assets/img/bg-white.png" class="absolute top-2 inset-1/3 z-10 w-1/3 h-auto" alt="" />
          </div>
        </div>
        <h3 class="font-medium text-[12px] text-[#09090B] line-clamp-2">
          {{ i.goods_name || '' }}
        </h3>
        <div class="font-medium text-[12px] text-[#71717A]">
          {{ i?.region?.name || '' }}
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'RecommendCards',
    props: {
      cards: {
        type: Array,
        default: () => []
      },
      show: {
        type: Boolean,
        default: true
      }
    }
  }
</script>
<style lang="less" scoped>
  .bgg {
    background: linear-gradient(180deg, #fff 50%, #e6e6e6 100%);
    border-radius: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
